{layout name="layout/header" /}
<link href="root/css/plugins/footable/footable.core.css" rel="stylesheet">

<link href="root/css/plugins/switchery/switchery.css" rel="stylesheet">
<script src="root/js/plugins/switchery/switchery.js"></script>
<!--<link href="root/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->
<link href="root/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>您正在为<span style="color: #ed5565">{$role.name}</span>配置权限</h5>
                    <div class="ibox-tools">
                        <button type="button" class="btn btn-primary btn-sm refresh">刷新</button>
                        <a type="button" class="btn btn-primary btn-sm" href="{:url('role_list')}">返回</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-6">

                            <div id="treeview"></div>
                        </div>
                        <div class="col-sm-6 col-sm-offset-1">

                            <button type="button" class="btn btn-success" id="save">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--layer-->
<script src="root/js/plugins/layer/layer.min.js"></script>
<!-- Bootstrap-Treeview plugin javascript -->
<script src="root/js/plugins/treeview/bootstrap-treeview.js"></script>
<script>
    $(document).ready(function() {
        var elem = document.querySelectorAll('.js-switch');
        elem.forEach(function(i,index){
            var a= "a" +index;
            a = new Switchery(i, {
            color: '#1AB394'
            });
        });
        var data = {$data};
        $('#treeview').treeview({
            levels: 3,
            color: "#428bca",
            expandIcon: 'glyphicon glyphicon-chevron-right',
            collapseIcon: 'glyphicon glyphicon-chevron-down',
            data: data,
            showCheckbox:true,
            showTags: true,
            onNodeSelected: function (event, node) {
                let sta = node.state.checked;
                if(!sta){
                    $('#treeview').treeview('checkNode', [ node.nodeId, { silent: true } ]);
                    checkNode(node);
                }else {
                    $('#treeview').treeview('uncheckNode', [ node.nodeId, { silent: true } ]);
                    uncheckNode(node);
                }
            }
        });
        
        $('#treeview').on('nodeChecked', function(event, data) {
            console.log(data);
            checkNode(data);
        });


        $('#treeview').on('nodeUnchecked', function(event, data) {
            uncheckNode(data);
        });

        $('#save').click(function(){
            var id = "{$role.id}";
            var nodes = $('#treeview').treeview('getChecked');
            var nodeIds =[];
            $.each(nodes,function (k,v) {
                nodeIds.push(v.id);
            })

            $.ajax({
                url:"{:url('rbac/ajax_save_access')}",
                type:'post',
                data:{id:id,node:nodeIds},
                dataType:'json',
                success:function (data) {
                    layer.msg(data.msg);
                }
            })


        });
    });

    /**
     * 遍历所有子节点
     * @param data
     */
    function checkNode(data) {
        if(data.nodes != undefined){
            $.each(data.nodes,function (k,v) {
                $('#treeview').treeview('checkNode', [ v.nodeId, { silent: true } ]);

                if(v.nodes != undefined){
                    checkNode(v);
                }
            })
        }
    }
    /**
     * 遍历所有子节点
     * @param data
     */
    function uncheckNode(data) {
        if(data.nodes != undefined){
            $.each(data.nodes,function (k,v) {
                $('#treeview').treeview('uncheckNode', [ v.nodeId, { silent: true } ]);

                if(v.nodes != undefined){
                    uncheckNode(v);
                }
            })
        }
    }
</script>
